<template>
<div class="container-cc">
    <List :finished="finished" @loadData="fetchData" @reFresh="reFetchData">
      <div class="jifen-list">
        <div v-for="(item, index) of orderList" :key="index" @click="toDetail(item.orderId)" class="box">
          <img class="mess-image" :src="item.image" alt="">
          <div class="item-msg">
            <div class="order">{{ item.orderId }}</div>
            <div class="title ellipsis-multiline">{{ item.spdb_scgl_gift.title }}</div>
            <div class="count">×{{ item.count }}</div> 
            <div class="lasthang">
              <div class="score">{{ item.score }}
                <span class="jfen">积分</span>
              </div>
              <div class="time">{{ item.orderTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </List>
    <div class="loading-container" v-if="loadingiconFlag">
      <van-loading color="#1989fa" type="spinner">加载中...</van-loading>
    </div>
</div>
</template>
 
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue'
import { getOrder } from '@/api/personalCenter';
import { showToast } from 'vant';
const loadingiconFlag = ref(false);
const router = useRouter()
const imgFlag = ref(false)
const parentId = JSON.parse(localStorage.getItem('parentId'));

const page = ref({
  currentPage: 1,
  pageSize: 20,
  sort: "desc",
  sidx: "orderTime",
  parentId: parentId,
  orderStatus: ""
});

const orderList = ref([]);
const finished = ref(false);

//  下拉刷新
const reFetchData = () => {
  page.value.currentPage = 1;
  finished.value = false;
  orderList.value = []
  debounce(fetchData, 800)();
}

//  防抖
function debounce(func, delay) {
   let timeout
   return function () {
       const _this = this
       const args = [...arguments]
       if (timeout) {
           clearTimeout(timeout)
       }
       timeout = setTimeout(() => {
           func.apply(_this, args)
       }, delay)
   }
}

onMounted(() => {
  fetchData()
})

const toDetail = (id)=> {
  router.push({ path: '/OrderDetail',query: { id: id } })
}

//  请求数据
async function fetchData() {
  loadingiconFlag.value = true
  if (finished.value) return;
  const { code, data } = await getOrder(page.value);
  if (code == 200) {
    const { currentPage, pageSize, total } = data.pagination;
    // 判断是否到底
    if (currentPage * pageSize >= total) {
      finished.value = true;
    }

    //  格式化数据
    orderList.value = orderList.value.concat(setOrderList(data.list));
    //  准备加载新的数据
    page.value.currentPage++;
    loadingiconFlag.value = false
  }else{
    showToast(res.msg)
    loadingiconFlag.value = false
  }
}

//  处理数据格式
function setOrderList (data) {
  const _data = [ ...data ].map(item => {
    try { 
      item.coverImage = JSON.parse(item.spdb_scgl_gift.coverImage);
      item.image = item.coverImage[0].url ? process.env.VITE_API_API_IMAGE_URL + item.coverImage[0].url : '';
      item.score = item.score
    } catch(ev) {
      item.image = '';
      item.score = ''
    } 
    return item;
  });

  return _data;
}

</script>
 

<style lang="scss" scoped>
.container-cc {
  // background: #f9f9f9;
  overflow: hidden;
  padding: 1rem 1.4rem;
  box-sizing: border-box;
}
.box{
  margin-bottom: 2rem;
  border-radius: 1rem;
  box-sizing: border-box;
  background: #fff;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}


.mess-image{
  width: 40%;
  height: 10rem;
  border-radius: .8rem;
}
.item-msg{
  width: 58%;
  margin-left: 2%;
}
.order{
  font-size: 1.2rem;
  color: #999;
  margin: 0.5rem 0;
}

.ellipsis-multiline {
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.title {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.score{
  color: red;
  font-size: 1.8rem;
  font-weight: bold;
}

.jfen{
  font-size: 0.8rem;
  color: #999;
}
.count{
  font-size: 1.4rem;
  color: #666;
  margin-bottom: 0.5rem;
}
.lasthang{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.time{
  font-size: 0.9rem;
  color: #666;
}
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30rem;
}
</style>